<!DOCTYPE html>
<html lang="en">
<head>

    <style >
        html{
            background: rgb(175, 140, 115);
            transition: background 1s ease-in-out
        }
        html, body  {
            height: 100%}

        #scene{
            width: 900px;
        }

        #contactUs{
            width: 80%;
            margin-right: auto;
            margin-left: auto;

            position: relative;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        #contactUs #countrySelection {
            border-bottom: 1px solid #EFEBE8;
            border-top: 1px solid #EFEBE8;
            position: relative;
        }

        #contactUs #countrySelection #countrySelection-wrapper {
            overflow: hidden;
            height: 60px;
            padding: 0 30px;
        }

        #countrySelection-items {
            margin: 0 20px;
            padding: 1px 0;
            list-style: none;
            white-space: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        #contactUs #countrySelector {
            position: relative;
            margin-left: -5px;
            top: -1px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #EFEBE8;
        }
        .active p, .active a{
            color: #fff !important;
        }

        #contactUs #countrySelection ul li {
            display: inline-block;
            margin: 16px 24px;
        }

        #contactUs p, #contactUs a{
            color: #EFEBE8;
            -webkit-transition: 0.2s ease-in-out;
            -moz-transition: 0.2s ease-in-out;
            -o-transition: 0.2s ease-in-out;
            transition: 0.2s ease-in-out;
        }

        a, a:visited, p{
            text-decoration: none;
            line-height: 1.3;
            letter-spacing: 0.25px;
            font-family: 'Gill Sans',
            Calibri,
            'Helvetica Neue',
            Arial,
            sans-serif;
            font-weight: 100;
            text-align:center;
        }
        a{font-size: 1rem;}
        p{font-size:1.5rem;}

        .slick-prev, .icon-chevronleft {
            transform: rotate(180deg);
        }
        .icon-chevronleft, .icon-chevronright {
            background-image: url('http://www.res-testing.com/images/arrow.png');
            background-repeat: no-repeat;
            background-size: 20px;
        }
        .countrySelection-paddle-left, .countrySelection-paddle-right {
            cursor: pointer;
            border: none;
            position: absolute;
            top: 20px;
            background-color: transparent;
            width: 25px;
            height: 25px;
            margin-left: auto;
            margin-right: auto;
            outline: none;
        }
        .slick-prev, .countrySelection-paddle-left {
            left: 0;
        }
        .arrow {
            width: 25px;
            margin-left: auto;
            margin-right: auto;
        }
        .slick-next, .countrySelection-paddle-right {
            right: 0;
        }
    </style>
</head>

<body>
<div id="contactUs">
    <p>A [really] simple responsive horizontal menu ready for any device.</p>
    <div id="countrySelection">
        <div id="countrySelection-wrapper">
            <ul id="countrySelection-items" style="">
                <div id="countrySelector" style="left: 345.267px;"></div>
                <li class="countrySelection-item  active">
                    <a href="#">Australia</a>
                </li>
                <li class="countrySelection-item">
                    <a href="#">Canada</a>
                </li>
                <li class="countrySelection-item">
                    <a href="#">Chile</a>
                </li>
                <li class="countrySelection-item">
                    <a href="#">France</a>
                </li>
                <li class="countrySelection-item">
                    <a href="#">Germany</a>
                </li>
                <li class="countrySelection-item">
                    <a href="#">Japan</a>
                </li>
                <li class="countrySelection-item">
                    <a href="#">Scandinavia</a>
                </li>
                <li class="countrySelection-item">
                    <a href="#">South Africa
                    </a>
                </li>
                <li class="countrySelection-item">
                    <a href="#">Turkey</a>
                </li>
                <li class="countrySelection-item">
                    <a href="#">UK &amp; Ireland</a>
                </li>
                <li class="countrySelection-item">
                    <a href="#">United States
                    </a>
                </li>
            </ul>
            <div class="countrySelection-paddles">
                <button class="countrySelection-paddle-left icon-chevronleft" aria-hidden="true">
                </button>
                <button class="countrySelection-paddle-right icon-chevronright" aria-hidden="true">
                </button>
            </div>
        </div>
    </div>
    <p>For the sample only the background colour will change between countries</p>
</div>

<script src="../scripts/jquery/2.1.3/jquery.js"></script>
<script src="../scripts/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
     $(function() {
        var items = $('#countrySelection-items').width();
        var itemSelected = document.getElementsByClassName('countrySelection-item');
        var backgroundColours = ["rgb(133, 105, 156)", "rgb(175, 140, 115)","rgb(151, 167, 109)","rgb(171, 100, 122)","rgb(105, 134, 156)","rgb(152, 189, 169)"]
        countriesPointerScroll($(itemSelected));
        $("#countrySelection-items").scrollLeft(200).delay(200).animate({
            scrollLeft: "-=200"
        }, 2000, "easeOutQuad");

        $('.countrySelection-paddle-right').click(function () {
            $("#countrySelection-items").animate({
                scrollLeft: '+='+items
            });
        });
        $('.countrySelection-paddle-left').click(function () {
            $( "#countrySelection-items" ).animate({
                scrollLeft: "-="+items
            });
        });

        if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            var scrolling = false;

            $(".countrySelection-paddle-right").bind("mouseover", function(event) {
                scrolling = true;
                scrollContent("right");
            }).bind("mouseout", function(event) {
                scrolling = false;
            });

            $(".countrySelection-paddle-left").bind("mouseover", function(event) {
                scrolling = true;
                scrollContent("left");
            }).bind("mouseout", function(event) {
                scrolling = false;
            });

            function scrollContent(direction) {
                var amount = (direction === "left" ? "-=3px" : "+=3px");
                $("#countrySelection-items").animate({
                    scrollLeft: amount
                }, 1, function() {
                    if (scrolling) {
                        scrollContent(direction);
                    }
                });
            }
        }

        $('.countrySelection-item').click(function () {
            $('#countrySelection').find('.active').removeClass('active');
            $(this).addClass("active");
            countriesPointerScroll($(this));
            newBackgroundColour(backgroundColours)
        });

    });
    var newBackgroundColour = function(backgroundColours){
        var newBackground = backgroundColours[Math.floor(Math.random()*backgroundColours.length)];
        if(newBackground != $("html").css("background-color")){
            $("html").css("background",newBackground);
        }else{
            newBackgroundColour(backgroundColours);
        }
    }

    function countriesPointerScroll(ele) {
        var parentScroll = $("#countrySelection-items").scrollLeft();
        var offset = ($(ele).offset().left - $('#countrySelection-items').offset().left);
        var totalelement = offset + $(ele).outerWidth()/2;
        var rt = (($(ele).offset().left) - ($('#countrySelection-wrapper').offset().left) + ($(ele).outerWidth())/2);
        $('#countrySelector').animate({
            left: totalelement + parentScroll
        })
    }
</script>
</body>
</html>